<!DOCTYPE html>
<html>
<head>
    <title>Waitrest</title>
    <style type="text/css">
        textarea {
            display: block;
            height: 200px;
            width: 500px;
        }

        .import {
            height: 400px;
            width: 1200px;
        }

        .error {
            color: red;
            display: block;
        }

        .message {
            color: blue;
            display: block;
        }

        div {
            background-color: #FAFAFA;
            border: 1px solid #BBBBBB;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            sampleData("textarea", ".sampleGET", "data-get");
            sampleData("textarea", ".samplePOST", "data-post");
            sampleData("textarea", ".samplePOSTWithParams", "data-postParams");
            reset(".reset", "textarea");
            confirmDelete("#deleteAllOrders");
        });

        function sampleData(input, populateTrigger, dataSourceAttr) {
            $(populateTrigger).click(function() {
                $(input).each(function() {
                    $(this).attr("value", $(this).attr(dataSourceAttr));
                });
                return false;
            });
        }

        function reset(resetTrigger, input) {
            $(resetTrigger).click(function() {
                $(input).val("");
                return false;
            });
        }

        function confirmDelete(deleteTrigger) {
            $(deleteTrigger).click(function() {
                return confirm("Are you sure you want to delete all orders?");
            });
        }
    </script>
</head>
<body>
<div>
    <form action="${orderUrl}" method="POST">
        <span class="message">${message}</span>
        <span class="error">${error}</span>
        <label>Request</label>
        <textarea name="request"
                  data-get="GET /cheese HTTP/1.1&#13;&#10;Host: localhost:8899"
                  data-postParams="POST /cheese HTTP/1.1&#13;&#10;Host: localhost:8899&#13;&#10;Content-Type: application/x-www-form-urlencoded&#13;&#10;&#13;&#10;a=b"
                  data-post="POST /cheese HTTP/1.1&#13;&#10;Host: localhost:8899">${request}</textarea>
        <label>Response</label>
        <textarea name="response"
                  data-get="HTTP/1.1 200 OK&#13;&#10;Content-Type: text/plain&#13;&#10;Content-Length: 9&#13;&#10;&#13;&#10;GET gouda"
                  data-postParams="HTTP/1.1 200 OK&#13;&#10;Content-Type: text/plain&#13;&#10;Content-Length: 21&#13;&#10;&#13;&#10;POST gouda with param"
                  data-post="HTTP/1.1 200 OK&#13;&#10;Content-Type: text/plain&#13;&#10;Content-Length: 10&#13;&#10;&#13;&#10;POST gouda">${response}</textarea>
        <input type="submit" name="action" value="Take order"/>
        <input type="submit" name="action" value="Take quick order"/>
        <a href="" class="sampleGET">Sample GET</a> |
        <a href="" class="samplePOST">Sample POST</a> | 
        <a href="" class="samplePOSTWithParams">Sample POST With Params</a> |
        <input type="reset" class="reset" value="Empty order"/>
    </form>
</div>
<div>
    <a href="${ordersUrl}">View all in-memory orders</a>
    <a href="${getOrdersUrl}">View all in-memory GET orders</a>
    <a href="${getOrderCounts}">View order counts</a>
<div>
    <form action="${importOrdersUrl}" method="POST">
        <textarea name="orders" class="import"></textarea>
        <input type="submit" value="Import"/>
    </form>
</div>
<div>
    <form action="${importOrdersFromFileUrl}" method="POST">
        <label for="importFile">Full path to the import .txt file or folder:</label><input type="text" name="importFile" id="importFile" size="150"/>
        <input type="submit" value="Import Orders"/>
    </form>
</div>
<div>
    <form action="${deleteOrdersUrl}" method="POST">
        <input id="deleteAllOrders" type="submit" value="Delete All Orders"/>
    </form>
</div>
</body>
</html>